<!--  -->
<template>
  <div class="app" ref="list">
    <top-tit :tit="'录播课程'"></top-tit>
    <div class="tab">
      <div class="container">
        <div
          class="tab_item"
          :class="{ active: tabIndex == 0 }"
          @click="changeTabIndex(0, ''), sendRequest()"
        >
          全部
        </div>
        <div
          class="tab_item"
          :class="{ active: tabIndex == 1 }"
          @click="changeTabIndex(1, 'free'), sendRequest()"
        >
          免费
        </div>
        <div class="filter_btn" @click="maskShow = !maskShow">
          筛选
          <img src="@/assets/img/filter.png" alt="" />
          <div class="mask" v-show="maskShow" @click.stop="maskShow = !maskShow">
            <!-- <div class="mask" v-show="maskShow" @click.stop="maskShow=!maskShow"> -->
            <div class="filter_list" @click="&quot;&quot;;">
              <div class="con">
                <div class="item" @click="changeFilterId(''), sendRequest()">全部</div>
                <div
                  class="item"
                  v-for="items in filterData"
                  :key="items.id"
                  v-text="items.name"
                  @click="changeFilterId(items.id), sendRequest()"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="container">
        <div class="lesson_list" ref="listHeight">
          <div
            class="lesson_item"
            v-for="item in listData.data"
            :key="item.id"
            @click="gotoDetail(item.id)"
          >
            <div class="img_box">
              <img :src="item.thumb" alt="" />
            </div>

            <div class="info">
              <p class="lesson_tit" v-text="item.title"></p>
              <div>
                <span class="star_num" v-text="item.user_count + '人已订阅'"></span>
                <span v-if="item.is_free == 1" class="price_free" v-text="'免费'"></span>
                <span v-else class="price" v-text="'￥' + item.charge"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="on_down" v-show="!lazyFlag || listHeight"> -->
    <div class="on_down" v-show="!lazyFlag">
      <div class="container" v-if="listDataLength == 0">你看现在哪还有数据啊</div>
      <div class="container" v-else>已经到底啦</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import topTit from "@/components/topTit";
import Vue from "vue";
export default {
  name: "myMessage",
  //import引入的组件需要注入到对象中才能使用
  components: {
    topTit,
  },
  data() {
    //这里存放数据
    return {
      page: 1,
      page_size: 10,
      lazyFlag: true,
      tabIndex: 0,

      maskShow: false,
      //   slides: [],
      //   grid: [],
      //   blank: [],
      //   followAuthor: [],
      //   blocks: [],
      //   lessonList: [],
      //   value: "",
      // listHeight: false,

      filterData: [],

      listData: [],
      listDataLength: "",
      scene: "",
      category_id: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeTabIndex(data1, data2) {
      this.tabIndex = data1;
      this.scene = data2;
      // console.log(this.scene);
      this.page = 1;
      this.lazyFlag = true;
      // this.listHeight = false;
    },
    changeFilterId(id) {
      this.category_id = id;
      this.page = 1;
      this.lazyFlag = true;
      // this.listHeight = false;
    },
    handleScroll() {
      let _scrollHeight = this.$refs.list.scrollHeight;
      let _scrollTop = this.$refs.list.scrollTop;
      let _windowHeight = window.innerHeight;
      //   console.log(_scrollHeight);
      //   console.log(_scrollTop);
      //   console.log(_windowHeight);
      if (_scrollHeight - _windowHeight == _scrollTop && this.lazyFlag) {
        this.page = this.page + 1;
        this.$axios
          .get("http://1.14.239.98/api/v2/courses", {
            params: {
              page: this.page,
              page_size: this.page_size,
              scene: this.scene,
              category_id: this.category_id,
            },
          })
          .then((res) => {
            // console.log("res", res);

            this.listData.data.push(...res.data.data);
            // console.log(res.data);
            if (this.listData.data.length == res.data.total) {
              this.lazyFlag = false;
            }
            // console.log(this.listData);
          });
      }
    },

    gotoDetail(id) {
      // console.log(item);
      this.$router.push({
        path: "/vod/detail",
        query: {
          id,
        },
      });
    },

    sendRequest() {
      // console.log('change');

      this.$axios
        .get("http://1.14.239.98/api/v2/courses", {
          params: {
            page: this.page,
            page_size: this.page_size,
            scene: this.scene,
            category_id: this.category_id,
            //场景[空:全部课程,recom:推荐,sub:订阅最多,free:免费课程]
          },
        })
        .then((res) => {
          // console.log("全部课程", res.data);
          // console.log("res", res);
          this.listData = res.data;
          this.listDataLength = this.listData.data.length;
          if (this.listData.data.length == res.data.total) {
            this.lazyFlag = false;
          }
          // console.log("全部课程",this.listData);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    await this.$axios.get("http://1.14.239.98/api/v2/course_categories").then((res) => {
      // console.log('分类数据',res);
      if (res.code == 0) {
        this.filterData = res.data;
        // console.log("分类数据", this.filterData);
      }
    });

    await this.$axios
      .get("http://1.14.239.98/api/v2/courses", {
        params: {
          page: this.page,
          page_size: this.page_size,
          //   scene: "recom",
          //场景[空:全部课程,recom:推荐,sub:订阅最多,free:免费课程]
        },
      })
      .then((res) => {
        // console.log("全部课程", res.data);
        this.listData = res.data;
        // console.log("全部课程", this.listData);
        this.listDataLength = this.listData.data.length;
        // console.log(this.listDataLength);
      });
    // console.log("create", this.lazyFlag);
    // console.log("create", this.listHeight);
    // let hei = this.$refs.listHeight.offsetHeight;
    // if (hei == 0) {
    //   console.log(123);
    //   return;
    // }
    // if (hei < window.innerHeight) {
    //   this.listHeight = true;
    //   console.log(this.listHeight);
    //   console.log(1);
    // }
    
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$refs.list.addEventListener("scroll", this.handleScroll);
    // console.log("dazai");
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
  //   let hei = this.$refs.listHeight.offsetHeight;
  //   if (hei == 0) {
  //     console.log(321);
  //     return;
  //   }
  //   if (hei < window.innerHeight) {
  //     this.listHeight = true;
  //     console.log(this.listHeight);
  //     console.log(this.$refs.listHeight.offsetHeight);
  //     console.log(1);
  //   }

  //   console.log("updated", this.lazyFlag);
  //   console.log("updated", this.listHeight);
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.app {
  height: 100%;
  overflow-y: scroll;
}
div.tab {
  height: 1rem;
  width: 100%;
  border-bottom: 10px solid #f3f6f9;
  .container {
    height: 1rem;
    width: 6.9rem;
    display: flex;
    justify-content: start;
    position: relative;
    align-items: center;
    div.tab_item {
      height: 1rem;
      font-size: 0.32rem;
      color: #666;
      line-height: 1rem;
      margin-right: 0.32rem;
    }
    div.tab_item.active {
      color: #3ca7fa;
      font-weight: bold;
    }

    div.filter_btn {
      position: absolute;
      right: 0;
      font-size: 0.28rem;
      img {
        width: 0.48rem;
        height: 0.48rem;
      }
      div.mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        div.filter_list {
          background-color: white;
          width: 3.32rem;
          position: absolute;
          right: 0.4rem;
          top: 1.8rem;
          border-radius: 0.16rem;
          div.con {
            width: 2.72rem;
            display: flex;
            flex-direction: column;
            max-width: 7.5rem;
            margin: 0 auto;
            div.item {
              height: 0.8rem;
              text-align: start;
              font-size: 0.28rem;
              color: #333;
              line-height: 0.8rem;
            }
          }
        }
      }
    }
  }
}

div.list {
  background-color: #fff;
  div.container {
    width: 6.9rem;
    display: flex;
    flex-direction: column;
    div.tit {
      width: 345px;
      height: 0.38rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
      span:nth-child(1) {
        font-size: 0.36rem;
        color: #333;
      }
      span:nth-child(2) {
        font-size: 0.24rem;
        color: #999;
      }
    }

    div.lesson_list {
      width: 6.9rem;
      display: flex;
      flex-direction: column;
      div.lesson_item {
        width: 6.9rem;
        height: 1.8rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.3rem;
        div.img_box {
          width: 2.4rem;
          height: 1.8rem;

          img {
            width: 2.4rem;
            height: 1.8rem;
            border-radius: 0.08rem;
          }
        }

        div.info {
          display: flex;
          width: 4.3rem;
          height: 1.8rem;
          flex-direction: column;
          justify-content: space-between;
          p.lesson_tit {
            margin-top: 0.1rem;
            font-size: 0.3rem;
            // margin-bottom: .3rem;
            text-align: start;
          }

          div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.1rem;
            span.star_num {
              color: #999;
              font-size: 0.24rem;
            }

            span.price {
              color: #ff5858;
              font-size: 0.36rem;
              font-weight: bolder;
            }
            span.price::first-letter {
              font-size: 0.28rem;
            }
            span.price_free {
              color: #52c41a;
              font-size: 0.28rem;
              font-weight: bolder;
            }
          }
        }
      }
    }
  }
}

div.on_down {
  height: 1.58rem;
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  div.container {
    height: 0.38rem;
    font-size: 0.28rem;
    color: #ccc;
  }
}
</style>
